<template>
	<div>
		<div class="slide-container">
			<swiper
				:slidesPerView="isDesktop ? 3 : 1.05"
				:spaceBetween="isDesktop ? 11 : 7.62"
				:loop="true"
				:autoHeight="true"
				:autoplay="{
					delay: 3000,
					pauseOnMouseEnter: true
				}">
				<swiper-slide v-for="(item, index) in data" :key="index">
					<a
						:href="url(item)"
						target="_blank"
						class="box-content w-full h-0 pb-[43.85%] app-mt-0 app-hover-offset relative">
						<base-image
							class="absolute inset-0 w-full h-full rounded-lg"
							:src="imgUrl(item)"
							type="network"></base-image>
					</a>
				</swiper-slide>
			</swiper>
		</div>
	</div>
</template>
<script setup lang="ts">
import SwiperCore from 'swiper'
import { Autoplay } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'
import BaseImage from '@/components/base/image/index.vue'
import { isDesktop } from '@/hooks/useIsPC.ts'

SwiperCore.use([Autoplay])
defineProps({
	data: {
		type: Array
	}
})
const url = (val: any) => {
	if (val.redirectPath.includes('https')) {
		return `val`
	} else {
		return `https:${val.redirectPath}`
	}
}
const imgUrl = (val: any) => {
	if (val.imagePath) {
		return val.imagePath
	} else {
		return `placeholder-banner`
	}
}
</script>
